<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.4.27/dist/vue.global.prod.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>灵知库助手</title>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366F1', // 紫色主色调
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }

            .scrollbar-thin {
                scrollbar-width: thin;
            }

            .scrollbar-thin::-webkit-scrollbar {
                width: 4px;
            }

            .scrollbar-thin::-webkit-scrollbar-track {
                background: transparent;
            }

            .scrollbar-thin::-webkit-scrollbar-thumb {
                background-color: rgba(156, 163, 175, 0.5);
                border-radius: 20px;
            }
        }
    </style>
</head>

<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
<div id="app" class="w-full max-w-4xl bg-white rounded-xl shadow-lg flex h-[90vh]">
    <!-- 左侧工具列 -->
    <div class="w-30 bg-gray-200 p-4 flex flex-col space-y-4">
        <div class="flex flex-wrap gap-2">
        <span data-tag="translate"
              class="px-3 py-1 rounded-full text-sm cursor-pointer transition-all bg-gray-300 text-gray-700"
              onclick="translateText(this, 'zh2En')">
            <i class="fa fa-language mr-1"></i><p>中译英</p></span>
        </div>
        <div class="flex flex-wrap gap-2">
        <span data-tag="translate"
              class="px-3 py-1 rounded-full text-sm cursor-pointer transition-all bg-gray-300 text-gray-700"
              onclick="translateText(this, 'en2Zh')">
            <i class="fa fa-language mr-1"></i><p>英译中</p></span>
        </div>
    </div>
    <!-- 聊天区域 -->
    <div class="flex-1 flex flex-col">
        <!-- 聊天头部 -->
        <div class="flex items-center justify-between p-4 border-b">
            <div class="flex items-center">
                <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white mr-2">
                    <i class="fa fa-comments"></i>
                </div>
                <div>
                    <h2 class="text-lg font-bold">灵知库助手</h2>
                    <p class="text-sm text-gray-500">在线 - 随时为您服务</p>
                </div>
            </div>
        </div>

        <!-- 聊天消息容器 - 自适应高度 -->
        <div ref="messageContainer" class="flex-1 overflow-y-auto p-4 scrollbar-thin">
            <!-- 消息列表 -->
            <div class="space-y-4">
                <div v-for="(msg, idx) in messages" :key="idx" class="flex"
                     :class="{ 'justify-end': msg.role === 'user' }">
                    <!-- 头像 -->
                    <div v-if="msg.role === 'user'"
                         class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white mr-2">
                        <i class="fa fa-user"></i>
                    </div>
                    <div v-else
                         class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-800 mr-2">
                        <i class="fa fa-robot"></i>
                    </div>

                    <!-- 消息气泡 -->
                    <div class="max-w-[80%] p-3 rounded-lg shadow-sm transition-all duration-300 relative" :class="{
             'bg-primary/10 text-primary dark:bg-primary/20': msg.role === 'user',
             'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200': msg.role === 'assistant'
           }">
                        <div v-if="msg.isHtml" class="text-sm break-words" v-html="msg.content"></div>
                        <p v-else class="text-sm break-words">{{ msg.content }}</p>
                        <div class="flex justify-between">
                            <p class="text-right text-xs text-gray-500 mt-1">{{ msg.time }}</p>

                            <!-- 消息操作按钮 -->
                            <div class="text-left text-xs text-gray-500 mt-1">
                                <button @click="copyMessage(msg.content)" class="p-1 text-gray-500 hover:text-primary">
                                    <i class="fas fa-copy text-xs"></i>
                                </button>
                                <button @click="showFullMessage(msg)" class="p-1 text-gray-500 hover:text-primary">
                                    <i class="fas fa-expand text-xs"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 加载状态指示器 - 移到消息容器外 -->
        <div v-show="isLoading" class="p-4 border-t">
            <div class="flex items-start">
                <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-800 mr-2">
                    <i class="fa fa-robot"></i>
                </div>
                <div class="bg-gray-100 rounded-lg p-3 max-w-[80%]">
                    <div class="flex space-x-1">
                        <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce"></div>
                        <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.2s">
                        </div>
                        <div class="w-2 h-2 rounded-full bg-gray-400 animate-bounce" style="animation-delay: 0.4s">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 输入框 - 固定在底部 -->
        <div class="flex items-center p-4 border-t">
            <input v-model="inputMsg" @keyup.enter="sendMessage"
                   class="flex-1 border border-gray-300 rounded-lg p-3 px-4 focus:outline-none focus:border-primary"
                   placeholder="输入消息..."/>
            <button @click="sendMessage"
                    class="ml-3 bg-primary text-white px-5 py-3 rounded-lg hover:bg-primary/90 transition flex items-center">
                <i class="fa fa-paper-plane mr-1"></i> 发送
            </button>
        </div>

        <!-- 消息放大模态框 -->
        <div v-if="showModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div class="bg-white rounded-lg p-6 max-w-3xl w-full max-h-[80vh] overflow-auto">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-bold">{{ modalTitle }}</h3>
                    <button @click="showModal = false" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div v-if="modalIsHtml" class="text-sm break-words" v-html="modalContent"></div>
                <pre v-else class="text-sm break-words whitespace-pre-wrap">{{ modalContent }}</pre>
                <div class="mt-4 flex justify-end">
                    <button @click="copyMessage(modalContent)"
                            class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90">
                        <i class="fas fa-copy mr-1"></i> 复制
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="dialog.js"></script>
</body>

</html>